<template>
  <div class="container">
    <el-card class="box-card">
      <!-- Section for desValue -->
      <div class="block" style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
        <p class="content">{{ data.desValue }}</p>
      </div>
      <!-- Section for gptValue2 -->
      <div class="block" style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
        <p class="content">{{ data.gptValue2 }}</p>
        <el-button type="primary" class="button" @click="evaluate('gptValue2')">{{ data.gptValue2Id ? '重新评价' : '评价' }}</el-button>
      </div>
      <!-- Confirmation Button outside the blocks -->

    </el-card>
  </div>
</template>

<script>
import { getOne, updateOne } from '@/services/task'

export default {
  data () {
    return {
      data: {

      }
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    async loadData () {
      const id = this.$route.params.id
      const response = await getOne(id)
      if (response.data.code === 200) {
        this.data = response.data.data
      }
    },
    evaluate (valueType) {
      console.log(valueType)
      const id = this.$route.params.id
      this.$router.push({
        name: 'task-config',
        params: { id, gpt: valueType }
      })
    },
    redirectToNewPage () {
      // 实现跳转到新页面的逻辑
      this.$router.push('/new-page')
    },
    async confirmEvaluation (id) {
      const response = await updateOne(id)
      console.log(response.data)
      if (response.data.code === 200) {
        this.$router.push('/task') // 接口调用成功后，返回列表页面
      }
    },
    confirmEvaluationAPI () {
      // 模拟API调用
      return new Promise((resolve) => {
        setTimeout(() => {
          alert('评价已确认')
          resolve()
        }, 1000)
      })
    }
  }
}
</script>

<style>
.container {
  position: relative; /* This makes sure that the child elements are positioned relative to this container */
  padding-bottom: 50px; /* Add padding to prevent content from being hidden by the fixed button */
}
.block {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.block .content {
  margin-bottom: 30px; /* Space for the content above the button */
}

.block .button {
  /* Adjustments if any specific to the button styles within blocks */
}

.confirm-evaluation {
  position: fixed; /* Fixed positioning relative to the viewport */
  right: 10px; /* Distance from the right */
  bottom: 10px; /* Distance from the bottom */
  z-index: 1000; /* Ensures it stays above other content */
}
</style>
